<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>退款成功页面</title>

    <link rel="stylesheet" href="./plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        img{
            width: 100%;
        }
        ul{
            border: 0;
        }
        .tick{
            text-align: center;
        }
        .tickimg{
            width: 60px;
            border-radius: 50%;
            height: 57px;
            background-color: #0BB20C;
            margin: 20px auto 10px ;
            position: relative;
        }
        .tickimg:after{
            position: absolute;
            content: '7';
            font-size: 48px;
            font-weight: bold;
            color: #fff;
            top: -6px;
            left: 22px;
            transform: rotateZ(-300deg) rotateX(-180deg) ;
            -webkit-transform:rotateZ(-300deg) rotateX(-180deg);
        }
        p{
            margin: 10px 0;
        }
        .mark{
            font-size: 16px;
            color: #808080;
            padding: .2em 0;
        }
        .des-label{
            width: 100px;
            text-align: right;
            font-size: 16px;
            font-weight: bolder;
            color: #808080;
            display: inline-block;
        }
        .list-group-item{
            width: 500px;
            height: 400px;
            margin: auto;
        }
        #touxiang{
            width: 50px;
            height: 50px;

            /* 设置边框为圆形 */
            border-radius: 50%;
        }
    </style>
</head>
<body>

    <!-- 最外层的div
         container
         container-fluid
    -->
    <div id="top-part">
        <!-- 导航begin -->
     <div class="container-fluid">
        <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid"> 
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">衣二三</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-home"></span>首页</a></li>
                    <!-- <li><a href="#"><span class="glyphicon glyphicon-lock"></span>登陆</a></li> -->
                    <li><a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span> 登陆</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#myModal1"><span class="glyphicon glyphicon-check"></span>注册</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>我的购物车</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span>个人中心</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-off"></span>安全退出</a></li> 
                    
                    <!-- 在用框架的使用，任何一个标签都会存在一些样式 -->
                    <li><img src="./images/头像.png" id="touxiang"></li>
                </ul>
            </div>
            </div>
        </nav>
        </div>
    </div>
    </div>
 <!-- 导航begin -->
 <div id="search-part"></div>
 
 <div class="container-fluid">
    <div class="row">
        <div class="col-md-offset-2 col-sm-7" >
            <div class="tick">
                <div class="tickimg" ></div>
                <p>退款成功</p>
            </div>
            <ul   style="margin-top: 10px" class="list-group"  >
                <li class="list-group-item" >
                    <p  class="mark" >
                        <span  class="des-label">订单号：</span>
                        <span>12222212212</span>
                    </p>
                    <p>
                        <span class="des-label">商品名称：</span>
                        <span>连衣裙</span>
                    </p>
                    <p>
                        <span class="des-label">规格：</span>
                        <span>S</span>
                    </p>
                    <p>
                        <span class="des-label">颜色：</span>
                        <span>白色</span>
                    </p>
                    <p>
                        <span class="des-label">数量：</span>
                        <span>1</span>
                    </p>
                </li>
            </ul >
            <div class="centainer" style="height: 50px;"></div>
            <button type="button" class="btn btn-default col-md-offset-1 col-sm-3" onclick="window.location.href='订单详情页面.html'">查看订单</button>
            <button type="button" class="btn btn-default col-md-offset-3 col-sm-3" onclick="window.location.href='index.html'">继续购物</button>
        </div>
    </div>
</div>
<!-- 导航end -->
   <!-- 模态框begin -->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        用户登陆入口
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group has-feedback">
                          <label for="firstname" class="col-sm-2 control-label">用户名</label>
                          <div class="col-md-6">
                            <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
                            <span class="glyphicon glyphicon-user form-control-feedback"></span>
                          </div>
                        </div>
                        <div class="form-group has-feedback">
                          <label for="lastname" class="col-sm-2 control-label">密码</label>
                          <div class="col-md-6">
                            <input type="password" class="form-control" id="password" placeholder="请输入密码">
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox">请记住我
                              </label>
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">登录</button>
                          </div>
                        </div>
                      </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 模态框end -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
              </button>
              <h4 class="modal-title" id="myModalLabel">
                用户注册入口
              </h4>
            </div>
            <div class="modal-body">
                      <form class="form-horizontal" role="form">
                          <div class="form-group has-feedback">
                            <label for="firstname" class="col-sm-2 control-label">用户名</label>
                            <div class="col-md-6">
                              <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
                              <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            </div>
                          </div>
                          <div class="form-group has-feedback">
                            <label for="lastname" class="col-sm-2 control-label">密码</label>
                            <div class="col-md-6">
                              <input type="password" class="form-control" id="password" placeholder="请输入密码">
                              <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                          </div>
                          <!-- <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                              <div class="checkbox">
                                <label>
                                  <input type="checkbox">请记住我
                                </label>
                              </div>
                            </div>
                          </div> -->
                          <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                              <button type="submit" class="btn btn-default">注册</button>
                            </div>
                          </div>
                        </form>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal -->
      </div>
    </div>
    <script src="./plugins/jquery/jquery.min.js"></script>
    <script src="./plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
<script type="text/javascript">
    $("#top-part").load("top-part.html");
    $("#search-part").load("search-part.html");
    $("#userimg-part").load("userimg-part.html");
</script>
</html>